* {
    margin: 0;
    padding: 0;
}
button{
    outline:none;   
    border: none;
}

i{
    font-style:normal
}

/* 黑框 */
.darks {
    background-color: rgb(0, 21, 41);
    height: 1000px;
}

/* 白框标题 */
.titles {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    height: 165px;
}

/* 灰框 */
.whites {
    height: 1000px;
    box-sizing: border-box;
    padding-bottom: 5%;
    border-top: 1px solid #ccc;
    background-color: rgb(240, 242, 245);
}


/* 主内容 */
#columnList {
    position: relative;
    box-sizing: border-box;
    padding: 22px 30px;
    border-radius: 4px;
    margin: 10% auto 0;
    background-color: rgb(255, 255, 255);
    width: 65%;
}


/* 主内容-H3 */
.columnTitle{
    margin: 0 0 2%;
    font-size: 16px;
    font-weight: 600;
}

/* 主内容-添加 */
#columnAdd{
    margin-right: 0.5%;
    background-color: rgb(24,144,255);
}

#columnDel{
    background-color: rgb(240,72,100);
}

#columnAdd,
#columnDel{
    width: 72px;
    height: 34px;
    color: #fff;
    border-radius: 4px;
}

/* 已选择几项 */
#selected{
    box-sizing: border-box;
    padding: 0.9% ;
    margin: 2.5% 0;
    border-radius: 4px;
    width: 100%;
    background-color: rgb(209,233,255);
    outline: 1px solid rgb(24, 144, 255, 1);
}

#selected>.icon-gantanhao{
    margin-right: 1.5%;
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    background-color: rgb(24,144,255);
}

#selected #lingLing{
    color:rgb(24,144,255);
}

/* 表格 */
#tdheight>.table>thead>tr>th{
    border-top: 2px solid #ddd;
}
/* 第三栏居中 */
#myTbody tr td:nth-child(3){
    padding-left: 3.3%;
}



/* input按钮 */
#myTbody tr td:nth-child(5){
    position: relative;
}

.switch-btn {
    position: absolute;
    top: 33%;
    left: 10%;
    cursor: pointer;
    width: 48px;
    height: 24px;
    border: 1px solid #dfdfdf;
    background-color: rgb(176,173,171);
    box-shadow: #dfdfdf 0 0 0 0 inset;
    border-radius: 15px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
}
.switch-btn:before {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0px;
    left: 3px;
    border-radius: 20px;
    background-color: #fff;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, .4); */
}
.switch-btn:checked {
    border-color: rgb(24,144,255);
    box-shadow: rgb(24,144,255) 0 0 0 16px inset;
    background-color: rgb(24,144,255);
}
.switch-btn:checked:before {
    left: 23px;
}
.switch-btn.switch-btn-animbg {
    transition: background-color ease .4s;
}
.switch-btn.switch-btn-animbg:before {
    transition: left .3s;
}
.switch-btn.switch-btn-animbg:checked {
    box-shadow: #dfdfdf 0 0 0 0 inset;
    background-color: rgb(24,144,255);
    transition: border-color .4s, background-color ease .4s;
}
.switch-btn.switch-btn-animbg:checked:before {
    transition: left .3s;
}

/* 复选框移入鼠标更改 */
#myTbody>tr td :nth-child(1){
    cursor: pointer;
}

/* tabody */
#tdheight .table tbody tr td{
    color: #333;
    font-size: 14px;
}
/* 下灰色边框 */
#tdheight .table #myTbody tr td{
    border: none;
}
#tdheight .table #myTbody tr{
    border-bottom: 1px solid #ddd;
}

 /* 编辑删除样式 */
.columnde,
.columnedit{
    cursor: pointer;
    color: #1890ff;
}

/* 编辑样式 */
.columnedit{
   margin-right: 20%;
}


/* 添加栏目框 */
#addColumn,
#editColumn{
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -211.5px;
    width: 450px;
    height: 423px;
    background-color: rgb(255, 255, 255);
    color: #333333;
    display: none;

}

#addColumn h4,
#editColumn h4{
    box-sizing: border-box;
    padding: 5px 20px 10px;
    font-size: 18px;
    border-bottom: solid 1px #ddd;
}

#addColumn div,
#editColumn div{
    margin: 20px 0;
    font-size: 14px;
}

#addColumn div>span,
#editColumn div>span{
    margin-right: 40px;
}

#addColumn div input,
#editColumn div input{
    box-sizing: border-box;
    padding: 0 10px;
}

#addColumn div input,
#addColumn div textarea,
#editColumn div input,
#editColumn div textarea{
    outline: none;
    border-radius: 4px;
    border: 1px solid #ccc;
}

#addColumn div input,
#editColumn div input{
    width: 261px;
    height: 32px;
}

#addColumn div input:hover,
#editColumn div input:hover{
    border: 1px solid rgb(24,144,255);
    box-shadow: 0px 0px 2px 2px rgba(163, 163, 163, 0.185);
}

#addColumn div textarea,
#editColumn div textarea{
    box-sizing: border-box;
    padding: 5px 10px;
    width: 261px;
    height: 148px;
    resize : none;
}


.addColumn_1,.editColumn_1{
    box-sizing: border-box;
    padding-left: 27px;
}

.addColumn_2,.editColumn_2{
    box-sizing: border-box;
    padding-left: 55px;
}

.addColumn_3,.editColumn_3{
    box-sizing: border-box;
    padding-left: 58px;
}

.addColumn_3>span,
.editColumn_3>span{
    float: left;
}

.addColumn_4,
.editColumn_4{
    box-sizing: border-box;
    padding-left: 260px;
}

.addColumn_4 button,
.editColumn_4 button{
    width: 65px;
    height: 32px;
    border-radius: 4px;
}

.addColumn_4 button:nth-child(1),.editColumn_4 button:nth-child(1){
    margin-right: 10px;
    outline: 1px solid #ddd;
    background-color: #fff;
    letter-spacing: 3px;
}

.addColumn_4 button:nth-child(2),.editColumn_4 button:nth-child(2){
    color: #fff;
    margin-right: 10px;
    background-color: rgb(24,144,255);
}


/* 选中删除 */
#checkShanc{
    display: none;
    width: 340px;
    height: 154px;
    box-sizing: border-box;
    padding: 1% 1%;
    position: absolute;
    background-color: white;
    box-shadow:  0px 0px 10px 2px rgb(104, 104, 104);
    left:50% ;
    margin-left: -170px;
    top: 28%;
}

#checkShanc h4{
    font-size: 14px;
    color: #000;
}

#checkShanc h4>span{
    display: inline-block;
    margin-right: 5%;
    text-align: center;
    line-height: 22px;
    width: 22px;
    height: 22px;
    background-color: rgb(250,173,20);
    border-radius: 100%;
}

#checkShanc p{
    margin-left: 12%;
    color: #999;
}

#checkShanc p>span{
    color: #f04134;
}

#checkShanc button{
    width: 66px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
}

#checkShanc_01{
    margin: 5% 2% 0  50% ;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #999;
}


#checkShanc_02{
    background-color: rgb(24,144,255);
    color: #fff;
}

.ShouyeG{
    box-sizing: border-box;
    padding-left: 2%;
}
.ShouyeG span{
  font-size: 14px;
  color: #999;
}

.ShouyeG i{
    font-size: 14px;
    color: #555;
  }

  .ShouyeG h3{
      font-size: 20px;
      color: #333;
     font-weight: 600;
  }